<!DOCTYPE HTML>
<html lang="zh">
<meta charset="utf-8">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>收银台</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
</head>
<style>

    .hidden{display: none;}
    img {
        vertical-align: middle;
        border: 0;
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    body {
        height: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 400;
        overflow-x: hidden;
        overflow-y: auto;
        background: #f4f6f8;
        font-size: 14px;
        color: #616161;
    }
    .container {
        max-width: 650px;
        margin: 0 auto;
    }
    .header {
        background: #fff;
        border-bottom: 1px solid #eee;
        height: 80px;
        padding-top: 12px;
        text-align: center;
        margin-bottom: 15px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    }
    .header .logo {
        width: 103px;
        height: 36px;
        margin: 0 auto;
        background-size: cover;
    }
    .mainbody {
        margin: 0 auto;
        margin-top: 15px;
        text-align: center;
        color: #333;
        padding-top: 6px;
        background: #fff url(/images/gepay/wave.png) top center repeat-x;
        background-size: auto 6px;
        min-height: 400px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    }
    .realprice {
        font-size: 46px;
        margin-top: 15px;
    }
    .qrcode {
        width: 250px;
        height: 250px;
        margin: 0 auto;
        padding: 20px;
        position: relative;
    }
    .qrcode img {
        width: 100%;
        height: 100%;

    }
    .qrcode .expired {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: .95;
        background: #fff url(/images/gepay/expired.png) center center no-repeat;
    }
    .qrcode .paid {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: .95;
        background: #fff url(/images/gepay/paid.png) center center no-repeat;
    }
    .warning {
        color: #f00;
    }
    .success {
        color: #05af19;
    }
    .remainseconds {
        width: 200px;
        margin: 0 auto;
        height: 80px;
        padding: 10px 35px;
        text-align: center;
    }
    .remainseconds .time {
        width: 55px;
        height: 80px;
    }
    .remainseconds .time b {
        font-size: 32px;
        font-weight: 300;
    }
    .remainseconds .time b,
    .remainseconds .time em {
        display: block;
    }
    .remainseconds .time em {
        font-style: normal;
        color: #888;
    }
    @media (max-width: 375px) {
        .container {
            padding: 0;
        }
        .remainseconds {
            padding: 0 35px 10px 35px;
            height: 80px;
        }
        .remainseconds .time {
            height: 100%;
        }
        .remainseconds .time b {
            font-size: 36px;
        }
    }
    @media (max-width: 320px) {
        .remainseconds {
            padding: 0 35px 10px 35px;
            height: 87px;
        }
        .remainseconds .time {
            height: 100%;
        }
        .remainseconds .time b {
            font-size: 36px;
        }
        .container {
            padding: 0;
        }
        .qrcode {
            width: 200px;
            height: 200px;
        }
        .realprice {
            font-size: 36px;
        }
    }
    .minutes {
        float: left;
    }
    .seconds {
        float: left;
    }
    .colon {
        float: left;
        width: 20px;
        font-size: 30px;
        line-height: 50px;
        font-family: Vernada, 'Microsoft Yahei';
    }
    .tips {
        border-top: 1px dotted #eee;
        background: #fff;
        padding: 15px 0;
        line-height: 25px;
        overflow: hidden;
        display: block;
        clear: both;
    }
    .help {
        line-height: 25px;
        padding: 15px 0;
        text-align: center;
        font-size: 14px;
    }
    .footer {
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 12px;
    }
    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 10px 50px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }

</style>
<body class="gray-bg">

<div class="container">
    <div class="header">
        <div class="logo">
            <img style="height:38px" src="/images/gepay/${qrTypeCode!}.png" title="${qrTypeName!}" alt="${qrTypeName!}" />
        </div>
    </div>
    <div class="mainbody">
        <div class="realprice">￥<span style="color:red;font-size:50px;">${payAmount!}</span></div>

        <#if isMobile>
            <div align="left" style="padding-left: 10px;">${payTip!}</div>
            <div align="left" class="warning" style="font-size:18px; padding-left: 10px;">付款时请务必输入以上金额,否则不会到账</div>
        <#else>
            <div align="center" >${payTip!}</div>
            <div align="center" class="warning" style="font-size:18px;">付款时请务必输入以上金额,否则不会到账</div>
        </#if>

        <div class="qrcode">
            <img class="image" src="${imgSrc!}" />
            <div class="expired hidden"></div>
            <div class="paid hidden"></div>
        </div>
        <#if isJumpWap>
            <div id="jump" style="display: none"><button class="button" onclick="startAlipay()">点击启动支付宝</button><br/>如不能启动 - 请截屏扫码支付</div>
        </#if>
        <div class="remainseconds">
            <div class="time minutes">
                <b>03</b>
                <em>分</em>
            </div>
            <div class="colon">:</div>
            <div class="time seconds">
                <b>0</b>
                <em>秒</em>
            </div>
        </div>

        <div class="help">
            支付即时到账，未到账请与我们联系<br /><span>订单号：${payOrderId!}</span><br>
        </div>

        <div class="tips">打开 &nbsp;${qrTypeName!} &nbsp;「扫一扫」</div>
    </div>
</div>
</body>
<div th:include="include :: footer"></div>
<script>

    function startAlipay() {
        var pl = "${jumpUrl!}";
        window.location = "alipays://platformapi/startapp?appId=20000067&url="+encodeURIComponent(pl);
    }

    $(function () {

        var payOrderId = "${payOrderId!}";
        if(!payOrderId){
            alert("订单号不存在！");
            $('body').hide();
            $('#jump').hide();
            return false;
        }

        var orderState = '${payOrderState!}';
        if(orderState == 2 || orderState == 3) {
            alert("该订单已支付， 请勿重复支付 ！");
            $('body').hide();
            $('#jump').hide();
            return false;
        }

        //alert("必须按照二维码上的金额支付，否则不会到账！当前打款金额【 ￥${payAmount!}】 ！");
        $('#jump').show();

        var timer, minutes, seconds, ci, qi;
        timer = parseInt('${timerSecond!}') - 1 ;
        ci = setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            $(".minutes b").text(minutes);
            $(".seconds b").text(seconds);
            if (--timer < 0) {
                $(".qrcode .expired").removeClass("hidden");
                $(".minutes b").text('00');
                $(".seconds b").text('00');
                $(".help").html('订单已过期,请重新提交');
                $('#jump').hide();
                clearInterval(ci);
            }
        }, 1000);


        //WebSocket监听， 等待接收订单支付成功的消息
        if(typeof(WebSocket) != "undefined") {
            //打开监听事件
            var socket = new WebSocket("${wsAddress!}");
            socket.onopen = function(){};

            //获得消息事件
            socket.onmessage = function(msgObject) {

                var resDataJSON = JSON.parse(msgObject.data);

                if(resDataJSON.state == '2' || resDataJSON.state == '3'){ //支付成功

                    clearInterval(ci);
                    $(".qrcode .paid").removeClass("hidden");
                    $(".qrcode .expired").addClass("hidden");
                    $(".minutes b").text('00');
                    $(".seconds b").text('00');
                    $('#jump').hide();
                    $(".help").html('<span style="font-size: 18px;color: forestgreen;">订单支付成功！</span>');

                    if(resDataJSON.returnUrl){
                        location.href = resDataJSON.returnUrl;
                    }

                }else if(resDataJSON.state == '-2'){ //支付超时

                    clearInterval(ci);
                    $(".qrcode .expired").removeClass("hidden");
                    $(".minutes b").text('00');
                    $(".seconds b").text('00');
                    $('#jump').hide();
                    $(".help").html('<span style="font-size: 18px;color: red;">订单已过期,请重新提交！</span>');
                }
            };
        }
    });

</script>
</body>
</html>